<template>
  <div>
    <el-card>
      <el-row style="margin-bottom: 10px">
        <el-col :span="4" style="margin-right: 10px">
          <el-input placeholder="输入关键字" v-model="searchKeyword"></el-input>
        </el-col>
        <el-col span="auto" style="margin-right: 10px">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>
        <el-col span="auto">
          <AddButton></AddButton>
        </el-col>
      </el-row>
      <el-table :data="tableData" border>
        <el-table-column label="ID" prop="id" width="60" header-align="center" align="center" sortable></el-table-column>
        <el-table-column label="功能模块名" prop="functionName" width="200" header-align="center"
          align="center"></el-table-column>
        <el-table-column label="功能模块码" prop="functionCode" width="200" header-align="center"
          align="center"></el-table-column>
        <el-table-column label="描述" prop="description" width="450" header-align="center" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="200" header-align="center" align="center"
          sortable></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleOpenEdit(scope.$index, scope.row)"
              style="margin-right: 10px">修改</el-button>
            <el-dialog title="修改功能模块" :visible.sync="dialogue" width="35%">
              <el-form :model="form" ref="form" :rules="rule" label-width="100px">
                <el-form-item label="功能模块名" prop="functionName">
                  <el-input v-model="form.functionName" autocomplete="off" style="width: 70%"
                    placeholder="请输入功能模块名"></el-input>
                </el-form-item>
                <el-form-item label="功能模块码" prop="functionCode">
                  <el-input v-model="form.functionCode" autocomplete="off" style="width: 70%"
                    placeholder="请输入功能模块码"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                  <el-input v-model="form.description" autocomplete="off" style="width: 70%" placeholder="请输入描述"
                    type="textarea" :row="6"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogue = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">确 定</el-button>
              </span>
            </el-dialog>
            <el-button size="mini" @click="deleteDialogOpen(scope.row)" type="danger">删除</el-button>
            <el-dialog title="确认删除" :visible.sync="deleteDialog" width="35%">
              <el-form :model="form" ref="form" :rules="rule" label-width="100px">
                <el-form-item label="功能模块名" prop="functionName">
                  <el-input v-model="form.functionName" autocomplete="off" style="width: 70%" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="功能模块码" prop="functionCode">
                  <el-input v-model="form.functionCode" autocomplete="off" style="width: 70%" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                  <el-input v-model="form.description" autocomplete="off" style="width: 70%" :readonly="true"
                    type="textarea" :row="6"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialog = false">取 消</el-button>
                <el-button type="primary" @click="handleDelete(scope.$index, scope.row)">确 定</el-button>
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div style="text-align: center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize" :total="totalSize" background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getFunctionList, editFunction, deleteFunction } from '@/api/system/function'
import AddButton from '@/views/system/function/components/AddButton.vue'
import { formatFunctionPaginationData } from '@/utils/format'

export default {
  components: { AddButton },
  provide() {
    return {
      getDataList: this.getDataList,
    }
  },
  data() {
    const validate = (rule, value, callback) => {
      if (value.length > 0) {
        callback()
      } else {
        callback(new Error('不能为空'))
      }
    }
    return {
      dataList: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      dialogue: false,
      deleteDialog: false,
      form: {
        id: 0,
        functionName: '',
        functionCode: '',
        description: '',
        createTime: ''
      },
      rule: {
        functionName: [{ required: true, trigger: 'blur', validator: validate }],
        functionCode: [{ required: true, trigger: 'blur', validator: validate }],
        description: [{ required: true, trigger: 'blur', validator: validate }]
      },
      searchKeyword: ''
    }
  },
  methods: {
    handleOpenEdit(index, row) {
      this.dialogue = true
      this.init(row)
    },
    deleteDialogOpen(row) {
      this.deleteDialog = true
      this.init(row)
    },
    init(data) {
      this.form = {
        id: data.id,
        functionName: data.functionName,
        functionCode: data.functionCode,
        description: data.description
      }
    },
    handleEdit(index, row) {
      this.$refs.form.validate(valid => {
        if (valid) {
          editFunction(this.form).then(res => {
            if (res.data.code === 200) {
              this.$message.success({
                message: res.data.message,
                duration: 1000
              })
              this.dialogue = false
              this.getDataList()
            } else {
              // this.$message.error({
              //   message: res.data.message,
              //   duration: 1000
              // })
            }
          })
        } else {
          return false
        }
      })
    },
    handleDelete(index, row) {
      deleteFunction({ functionId: this.form.id }).then(res => {
        if (res.data.code === 200) {
          this.deleteDialog = false
          this.$message.success({
            message: res.data.message,
            duration: 1000
          })
          this.getDataList()
        } else {
          // this.$message.error({
          //   message: res.data.message,
          //   duration: 1000
          // })
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    getDataList() {
      getFunctionList({
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        if (res.data.code === 200) {
          this.dataList = res.data.pageResult.dataList
          this.tableData = formatFunctionPaginationData(this.dataList)
          this.totalSize = res.data.pageResult.totalCount
        } else {
          // this.$message.error({
          //   message: res.data.message,
          //   duration: 1000
          // })
        }
      })
    },
    search() {
      getFunctionList({
        keyword: this.searchKeyword,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        if (res.data.code === 200) {
          this.dataList = res.data.pageResult.dataList
          this.tableData = formatFunctionPaginationData(this.dataList)
          this.totalSize = res.data.pageResult.totalCount
        } else {
          // this.$message.error({
          //   message: res.data.message,
          //   duration: 1000
          // })
        }
      })
    }
  },
  created() {
    this.getDataList()
  },
  watch: {
    searchKeyword(newVal) {
      if (newVal === '') {
        this.getDataList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
</style>
